//初始化
function init() {
    var target1 = document.getElementById('target1');
    var tween = new TWEEN.Tween(target1.dataset)
                .to({
                    rotation: 360,
                    y: 300
                }, 2000)
                .repeat(1)
                .delay(1000)
                .yoyo(true)
                .easing(TWEEN.Easing.Cubic.InOut)
                .onUpdate(function(obj) {
                    updateBox(target1, obj);
                })
                .start();

    var target2 = document.getElementById('target2');
    var tween2 = new TWEEN.Tween(target2.dataset)
                .to({
                    rotation: 360,
                    y: 300
                }, 2000)
                .repeat(Infinity)
                .delay(1000)
                .yoyo(true)
                .easing(TWEEN.Easing.Cubic.InOut)
                .onUpdate(function(obj) {
                    updateBox(target2, obj);
                })
                .start();
}

//处理dom
function updateBox(target, obj) {
    var transform = `translateY(${obj.y}px) rotate(${obj.rotation}deg)`;
    target.style.transform = transform;
}

//动画函数
function animate() {
    var id = requestAnimationFrame(animate);
    var result = TWEEN.update();
    if(!result) cancelAnimationFrame(id);
}

init();
animate();